/**
 * Summary meta box
 */
.wpmud {
  .wrap-wphb-notifications .box-summary.sui-summary:not(.sui-rebranded):not(.sui-unbranded):not(.sui-summary-sm) {
    @if variable-exists(summary-image) {
      @include background-2x("#{$image--path}/hb-icon", 'png', $summary-image--width, $summary-image--height, 30px center );
    }

    @include media(max-width, md) {
      background-image: unset;
    }
  }

  // Overwrite upsells.
  .sui-wrap .box-notifications-configure .sui-box-body {
    &.sui-upsell-items .sui-box-settings-row {
      padding-top: 65px;
      @include bp(desktop-wide) { padding-top: 45px; }
      @include bp(desktop-small) { padding-top: 31px; }
      &.sui-disabled { padding: 0; }
      tbody { box-shadow: inset 2px 0 0 #8D00B1; }
    }

    .sui-upsell-row {
      .sui-upsell-image { width: 172px; }
      .sui-upsell-notice {
        padding-left: 210px;
        @include bp(tablet) { padding-left: 0; }
      }
    }
  }

  // Modals
  #notification-modal {
    .sui-box { margin-bottom: 0; }

    .sui-box-banner {
      background-color: #F2F2F2;

      img {
        max-width: 169px;
        margin-top: 30px;
      }
    }

    /**
     * Schedule slide
     */
    #notifications-slide-schedule  {
      .sui-side-tabs { margin-top: 10px; }
    }

    /**
     * Recipients slide
     */
    #enm-recipients-content,
    #notifications-slide-recipients .sui-box-body {
      .sui-recipient {
        .sui-recipient-email {
          flex-basis: 200px;
          flex-grow: 1;
        }
        & > button {
          flex-basis: 30px;
          &:last-of-type { margin-left: 15px; }
        }
      }

      /**
       * Add users & Add by email recipient list.
       */
      #notifications-add-users-content .sui-recipient-name,
      #notifications-invite-users-content .sui-recipient-name {
        display: flex;
        align-items: center;
        flex-basis: 160px;
        overflow: initial;
        white-space: pre-line;
        &:before { display: none; }

        .subscriber {
          height: 20px;
          width: 20px;
          margin-right: 10px;

          img {
            border-radius: 50%;
            width: 20px;
          }
        }
      }

      .resend-invite {
        margin-right: -15px;
      }

      /**
       * Users list
       */
      #modal-wp-user-list {
        max-height: 300px;
        overflow-x: hidden;
      }

      /**
       * Add by email
       */
      #notifications-invite-users-content {
        p.sui-description:first-of-type { margin-bottom: 20px; }
        .sui-form-field:first-of-type { margin-top: 10px; }
      }

      strong { font-size: 13px; }
    }
  }

  /**
   * Configure meta box and modal recipient icons.
   */
  .box-pro-notifications-configure,
  #notifications-add-users-content .sui-recipient-name,
  #notifications-invite-users-content .sui-recipient-name {
    .subscriber {
      display: flex;
      width: 34px;

      &.pending { @include icon( after, 'clock' ); }
      &.confirmed { @include icon( after, 'check-tick' ); }
      &.unsubscribed { @include icon( after, 'warning-alert' ); }
      &.pending:after,
      &.confirmed:after,
      &.unsubscribed:after {
        width: 12px;
        height: 12px;
        position: relative;
        top: 10px;
        left: -10px;
        border: 2px solid #fff;
        background-color: #fff;
        border-radius: 50%;
      }
      &.pending:after { color: #888; }
      &.confirmed:after { color: #1abc9c; }
      &.unsubscribed:after { color: #FF6D6D; }
    }
  }

  .box-pro-notifications-configure .subscriber {
    &.pending:after,
    &.confirmed:after,
    &.unsubscribed:after {
      top: 20px;
      left: -13px;
    }
  }

  /**
   * Configure meta box.
   */
  .box-pro-notifications-configure {
    table {
      tbody { box-shadow: inset 2px 0 0 #888888; }
      tr:last-of-type { border-bottom: 1px solid #E6E6E6; }
      tr th:last-of-type { width: 75px; }
      tr td:last-of-type { text-align: right; }

      td.notification-recipients {
        & > span {
          display: flex;
          align-items: center;
          & > a.wphb-configure-notification { margin-left: 10px; }
        }

        div.sui-tooltip {
          height: 34px;
          margin-right: 5px;
          .subscriber {
            &:last-of-type { margin-right: 0; }
            img {
              width: 34px;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}


